<script setup>
import { computed, reactive, ref } from 'vue';



// 显示用户输入的用户名
const usernameShow = ref("");
const n1 = ref(1);
const n2 = ref(1);

// 成绩
const sType = ref("A");

// v-for循环
const items = ref([{"username":"张三"},{"username":"李四"},{"username":"特朗普"},{"username":"拜登"},{"username":"克林顿"},{"username":"小联想"},{"username":"印度阿三"},{"username":"美国李四"}]);

// 计算属性
const calVal = computed(() =>{
    return usernameShow.value.split('').reverse().join('');
});

// 演示冒泡
function showInfo(info)
{
  alert(info);
}


</script>

<template>


用户名：<input type="text" v-model="usernameShow" v-bind:placeholder="usernameTip"> <br>
密码：<input @dblclick="showPwdInfo" type="password" :placeholder="pwdTip" > <br>
你输入的用户名：{{ usernameShow }} <br>
你输入的用户名翻转：{{calVal}} <br>
<input type="text" v-model.number="n1"> + 
<input type="text" v-model.number="n2"> = 
{{ n1 + n2}}
<br>
小明的成绩：<p v-if="sType === 'A'">成绩优秀</p>
<p v-else-if="sType === 'B'">成绩中等</p>
<p v-else>成绩差</p>

<br>
<hr>
<!--不带序号输出-->
<span v-for="uname in items">
    {{uname.username}}
</span>

<!--带序号输出-->
<span v-for="(item,index) in items">
    {{index + 1}} : {{item.username}}
</span>
<hr><br><br>
<!--带序号输出，很随意的参数名-->
<span v-for="(e,i) in items">
    {{i + 1}} : {{e.username}}
</span>
<!--带序号输出，其他标签使用v-for-->
<li v-for="(e,i) in items">
    {{i + 1}} : {{e.username}}
</li>
<br>
<div @click="showInfo('点击了红色框')" style="width: 200px; height: 200px; background-color: red;">
    <div @click.stop="showInfo('点击了蓝色框')" style="width: 100px; height: 100px; background-color: blue;">
</div>

</div>
</template>

<style>

</style>